New Jeep Compass and Grand Wagoneer Trailhawk

/************************** GForm Overrides to Match VDP Modal Forms -START- **************************/
.gform-modal button,.gform-modal div { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; box-shadow: none; border: 0 } .gform-modal .modal-content div,.gform-modal .modal-content input,.gform-modal .modal-content label,.gform-modal .modal-content p.offer-up-to,.gform-modal .modal-content ul { font-family: ‘Open Sans’,sans-serif; font-size: 14px; line-height: 170%; padding: 0; margin: 0; color: #495057; cursor: default; font-weight: 400 } .maserati-theme .gform-modal .modal-content div,.maserati-theme .gform-modal .modal-content input,.maserati-theme .gform-modal .modal-content label,.maserati-theme .gform-modal .modal-content p.offer-up-to,.maserati-theme .gform-modal .modal-content ul { font-family: univers,sans-serif!important; color: #333 } .gform-modal .modal-content li { list-style: none } .gform-modal div.modal-header { padding: 15px; background-color: #f8f9fa } .maserati-theme .gform-modal div.modal-header { background-color: #f2f1f0 } .gform-modal div.modal-header h3,.gform-modal div.modal-header h4 { color: #495057; font-size: 14px; font-weight: 700 } .maserati-theme .gform-modal div.modal-header h3,.maserati-theme .gform-modal div.modal-header h4 { color: #333 } .gform-modal div.modal-body { background-color: #fff } .gform-modal div.modal-body .gform_body { padding: 25px 20px } .gform-modal div span { width: 100%!important; display: block } .gform-modal div span.name_first input,.gform-modal div span.name_last input,.gform-modal div.form-group input,.gform-modal div.form-group textarea,.gform-modal div.ginput_container input,.gform-modal div.ginput_container textarea { width: 100%!important; padding: 5px; background-color: #f8f9fa; border: 1px solid #f0f1f2; margin-bottom: 5px; cursor: text } .gform-modal div.form-group input[type=checkbox],.gform-modal div.ginput_container input[type=checkbox] { width: auto!important } .maserati-theme .gform-modal div span.name_first input,.maserati-theme .gform-modal div span.name_last input,.maserati-theme .gform-modal div.form-group input,.maserati-theme .gform-modal div.form-group textarea,.maserati-theme .gform-modal div.ginput_container input,.maserati-theme .gform-modal div.ginput_container textarea { background-color: #fff; border: 1px solid #f2f1f0 } .gform-modal div span.name_first label,.gform-modal div span.name_last label { font-size: 12px; margin-bottom: 4px; color: #bfc5cb } .maserati-theme .gform-modal div span.name_first label,.maserati-theme .gform-modal div span.name_last label { color: #f2f1f0 } .gform-modal .gfield .gfield_label { margin-bottom: 4px } .gform-modal div.ginput_container { margin-bottom: 4px } .gform-modal input#incentives-form-button.gform_button,.gform-modal input.gform_button,.gform-modal input.gform_button[type=submit],.gform-modal input.gform_button[type=submit]:hover { background-color: #495057!important; font-weight: 700; color: #fff; padding: 15px; border: 0; width: 100%!important; cursor: pointer } .gform-modal div.gform_footer { background-color: #fff; padding: 20px!important; margin: 0!important; width: 100%!important } .gform-modal .gform_wrapper .gform_footer { padding-left: 20px!important } .gform-modal div.gform_footer p { padding-bottom: 25px } .gform-modal span.gfield_required { display: inline; line-height: 170%; vertical-align: super; font-size: 12px; color: #495057!important; margin-left: 0 } .maserati-theme .gform-modal span.gfield_required { color: #666!important } .gform-modal .modal-content .modal-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0 } .gform-modal .modal-content .modal-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .gform-modal .modal-content div.modal-incentive-details h4 { font-weight: 700; line-height: 150%; margin-bottom: 20px } .gform-modal .modal-content div.modal-incentive-details { padding: 20px } .gform-modal .modal-content div.modal-incentive-details .incentive-date { margin-top: 20px } .gform-modal .modal-content div.modal-incentive-details ul { padding-left: 20px } .gform-modal .modal-content div.modal-incentive-details li { list-style: disc } .gform-modal .modal-content div.incentive-disclaimers { padding: 20px } .gform-modal .modal-content div.incentive-disclaimers p { font-size: 12px; color: #777 } .maserati-theme .gform-modal .modal-content div.incentive-disclaimers p { color: #666 } .gform-modal .modal-content .incentive-form-title { padding: 0 20px; font-weight: 700; font-size: 14px; color: #637679 } .maserati-theme .gform-modal .modal-content .incentive-form-title { color: #666 } .gform-modal .modal-content .incentive-form-title hr { border: 0; border-bottom: 3apx solid #f8f9fa } .maserati-theme .gform-modal .modal-content .incentive-form-title hr { border-bottom: 3apx solid #f2f1f0 } .gform-modal .gform_fieldlabel_Name>div:first-child { font-weight: 700; } .gform-modal div span.name_first label, .gform-modal div span.name_last label { color: #495057!important; font-weight: 700!important; } .gform-modal div span.name_first input, .gform-modal div span.name_last input, .gform-modal textarea { border: 1px solid #ccc!important; }
/************************** GForm Overrides to Match VDP Modal Forms -END- **************************/

/*************************** VDP 2020 AND FORM -START- ***************************/
#cta-buttons-right.area_c .cta-button { background-color: #fff !important; }
.mark3-fixed-price-stack .mark3-fixed-cta-group .cta-button { background-color: #000 !important; }
.mark3-fixed-price-stack .mark3-fixed-price-stack-container { margin-bottom: 100px !important; display: none !important; }
div.mobile-phone-btn { display: none !important; }
.mark3-left-column .mark3-similar-vehicles div { width: 100%; }
#field_33_1 > legend { display: none !important; }
#input_33_1004 { width: 100% !important; }

.vdp-mark3 .mark3-carousel.slick-slider img { height: 420px; object-fit: cover; padding: 5px; }

@media only screen and (max-width: 1799px) {
.vdp-mark3 .mark3-carousel.slick-slider img { height: 350px; }
}

@media only screen and (max-width: 1199px) {
.vdp-mark3 .mark3-carousel.slick-slider img { height: 250px; }
}

@media only screen and (max-width: 991px) {
.vdp-mark3 .mark3-carousel.slick-slider img { height: 200px; }
}

@media only screen and (max-width: 767px) {
#similar-vehicles-list ul.slick-dots { display: none !important; }
}
/*************************** VDP 2020 AND FORM -END- ***************************/

/******************** General UX Styling -START- ********************/
.vlpm3Search { border: 2px solid #727272 !important; }
.vlpm3MainCTA .cta-button.vlpm3MainCTA__btn { padding-left: 0 !important; padding-right: 0 !important; font-size: 16px; background-color: #e70033; border-radius: 0 !important; transition: all 0.2s; }
.vlpm3FilterOptions__name { white-space: normal !important; vertical-align: middle; }
.vlpm3FilterOptions__name > span { display: inline !important; vertical-align: middle; }
#similar-vehicles-list ul.slick-dots li { width: auto !important; }
.vdp-mark3-main-container.bg-color-2 { padding-bottom: 10px !important; }
.vlpm3FilterItem input.list-search-input { margin-bottom: 20px; }
.mark3-fixed-price-stack .mark3-fixed-cta-group .cta-button { background: #333 !important; }
.vdp-mark3 .mark3-similar-vehicles.slick-slider .slick-nav-custom { z-index: 997 !important; }
.pdtm-right-panel-number a { text-decoration: underline !important; }
#vehicle-listing-container .vlp2024-item .price-column .cta-buttons-block .cta-button { font-size: 16px !important; font-weight: bold; }
#vehicle-listing-container .vlp2024-item .price-column .cta-buttons-block .cta-button:hover { opacity: 0.8; }
.vdp-mark3-header h1 { font-size: 16px !important; }
.vdp-mark3.default-theme .vdp-mark3-header.bg-color-1 { padding: 15px 20px 5px 20px !important; }
#cta-buttons-left .cta-button span.hidden-xs { font-size: 16px !important; }
#cta-buttons-left .cta-button { font-size: 16px !important; text-align: center !important; background-color: #df0000 !important; border-radius: 0 !important; }
#cta-buttons-left .cta-button:hover { opacity: 0.8; }
@media only screen and (min-width: 1200px) {
.vlpm3FiltersGroup .vlpm3FilterItem { padding-left: 0; padding-right: 10px !important; }
.vdp-mark3 .vdp-quick-links .qlinks { font-size: 16px !important; }
}

.row.vlpm3__mainBody.vlpm3__mainBody–bgColorWhite { margin-left: 0; margin-right: 0; }
@media only screen and (max-width: 1199px) {
.vdp .inventory-display-container { background: #fff !important; }
}
@media only screen and (max-width: 767px) {
.vlpm3VehicleImage__static img { min-height: 260px; object-fit: contain; }
}

@media (min-width: 768px) {
#vehicle-listing-container.grid .vlpm3VehicleRowList { justify-content: space-between; }
.vlpm3FiltersPanel__header, .vlpm3FilterItem { padding: 50px 50px 30px 0 !important; }
}

@media (min-width: 992px) {
#inventory-display-container > .container { width: 100%; max-width: 2100px; }
}
/******************** General UX Styling -END- ********************/

/******************** JSTAR -START- ********************/
#vehicle-display .mark3-carousel.slick-initialized { padding: 0 !important; }
#vehicle-display .vdp-mark3 .mark3-carousel { background-color: #121212; padding: 0 !important; }
#vehicle-display .vdp-mark3 .mark3-carousel.slick-slider img { padding: 0 !important; }
#vehicle-display .mark3-counter-container { position: relative; margin-top: -75px; background-color: transparent !important; }
#vehicle-display .mark3-counter-container .mark3-video { background: #fff; border-radius: 30px; }
#vehicle-display .mark3-counter-container .mark3-video .text-color-4 { color: #000000; font-weight: bold; padding: 10px 20px; margin-left: 0 !important; background: rgba(255,255,255,0.6); border-radius: 30px; opacity: 0.6; }
#vehicle-display .mark3-counter-container .mark3-video .text-color-4:hover { opacity: 1; background: rgba(255,255,255,1); }
#vehicle-display .mark3-counter-container .mark3-video .text-color-4 i { color: #000 !important; }
#vehicle-display .mark3-carousel-counter .mark3-carousel-counter-text { color: #000000; background-color: #fff !important; font-weight: bold; border-radius: 30px; padding: 10px 20px; margin-left: 0 !important; opacity: 0.6; display: inline-block !important; }
#vehicle-display .mark3-carousel-counter .mark3-carousel-counter-text i { color: #000 !important; }
#vehicle-display .mark3-carousel-all-images .mark3-vimg-item { padding: 0 !important; }
#vehicle-display .vdp-mark3.default-theme .bg-color-2 { background-color: #000 !important; }
#vehicle-display .vdp-mark3-body.bg-color-3 .mark3-panels { padding-top: 5px !important; background-color: #000 !important; }
#vehicle-display .vdp-mark3.default-theme .bg-color-3 { background-color: #000 !important; }

#vehicle-name-title { color: #fff !important; font-size: 36px !important; margin-bottom: 30px !important; }
section.mark3-vehicle-details-section { margin-bottom: 30px; }
.text-color-3.margin-btm-10 { color: #c5c5c5 !important; font-size: 22px !important; line-height: 100% !important; margin-bottom: 12px !important; }
.mark3-left-column .mark3-vehicle-details li { color: #ffffff; font-size: 16px; line-height: 165%; }

#vehicle-name-section .mark3-vehicle-details { display: flex; flex-wrap: wrap; }
#vehicle-name-section .mark3-vehicle-details > section { width: 100%; }
/******************** JSTAR -END- ********************/

/******************** HIDDEN ELEMENTS -START- ********************/
#vehicle-display .vdp-mark3-header { display: none !important; }
#vehicle-display .mark3-save-compare { display: none !important; }
.mark3-left-divider.border-color-1 { display: none !important; }
/******************** HIDDEN ELEMENTS -END- ********************/